<template>
  <div>
    <code-mirror-editor
      class="input-style"
      :class="{ error_border: formulaErr.length > 0 }"
      :value="formulaValue"
      mode="javascript"
      height="80"
      :from="from"
      :table-list="columnList"
      @cm:focus="handleFocus"
      @update:value="updateValue"
    ></code-mirror-editor>
    <p v-if="formulaErr.length > 0" class="warning-text">
      {{ formulaErr }}
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import CodeMirrorEditor from '@/components/studio/data/popup/CodeMirrorEditor.vue'

@Component({
  components: {
    CodeMirrorEditor,
  },
})
export default class FormulaBox extends Vue {
  @Prop({
    type: String,
    default() {
      return ''
    },
  })
  formulaErr: String | undefined

  @Prop({
    type: String,
    default() {
      return ''
    },
  })
  formulaValue: String | undefined

  @Prop({
    type: Array,
    default() {
      return []
    },
  })
  columnList: Array<any> | undefined

  @Prop({
    type: String,
    default() {
      return 'formula'
    },
  })
  from: String | undefined

  //  更新cell代码的值
  public updateValue(value: string) {
    this.$emit('update:value', value)
  }

  public handleFocus() {
    this.$emit('cm:focus', 'formula')
  }
}
</script>

<style lang="less" scoped>
.input-style {
  border: 1px solid #cbceff;
  border-radius: 2px;
}

.input-style.error_border {
  border: 1px solid #e6505a;
}

.warning-text {
  color: #e6505a;
  display: inline-block;
  margin: 0;
  word-break: break-word;
}
</style>
